<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirm-loading="false"
    @ok="handleCancel"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <!--    <div class="table-page-search-wrapper">-->
      <!--      <a-form layout="inline" @keyup.enter.native="searchQuery">-->
      <!--        <a-row :gutter="24">-->
      <!--          <a-col :md="6" :sm="8">-->
      <!--            <a-form-item label="approvalProcessType">-->
      <!--              <j-dict-select-tag placeholder="请选择approvalProcessType" v-model="queryParam.approvalProcessType" dictCode="approval_process_type"/>-->
      <!--            </a-form-item>-->
      <!--          </a-col>-->
      <!--          <a-col :md="6" :sm="8">-->
      <!--            <a-form-item label="approvalProcessCode">-->
      <!--              <a-input placeholder="请输入approvalProcessCode" v-model="queryParam.approvalProcessCode"></a-input>-->
      <!--            </a-form-item>-->
      <!--          </a-col>-->
      <!--          <template v-if="toggleSearchStatus">-->
      <!--            <a-col :md="6" :sm="8">-->
      <!--              <a-form-item label="state">-->
      <!--                <j-dict-select-tag placeholder="请选择state" v-model="queryParam.state" dictCode="state"/>-->
      <!--              </a-form-item>-->
      <!--            </a-col>-->
      <!--          </template>-->
      <!--          <a-col :md="6" :sm="8" >-->
      <!--            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">-->
      <!--              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
      <!--              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
      <!--              <a @click="handleToggleSearch" style="margin-left: 8px">-->
      <!--                {{ toggleSearchStatus ? '收起' : '展开' }}-->
      <!--                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>-->
      <!--              </a>-->
      <!--            </span>-->
      <!--          </a-col>-->

      <!--        </a-row>-->
      <!--      </a-form>-->
      <!--    </div>-->
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <!--    <div class="table-operator">-->
      <!--      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
      <!--      <a-button type="primary" icon="download" @click="handleExportXls('审批流程-结束 （通过或者拒绝）')">导出</a-button>-->
      <!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
      <!--        <a-button type="primary" icon="import">导入</a-button>-->
      <!--      </a-upload>-->
      <!--      <a-dropdown v-if="selectedRowKeys.length > 0">-->
      <!--        <a-menu slot="overlay">-->
      <!--          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>-->
      <!--        </a-menu>-->
      <!--        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>-->
      <!--      </a-dropdown>-->
      <!--    </div>-->

      <!-- table区域-begin -->
      <div>
        <!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
        <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
        <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
        <!--      </div>-->

        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange">

          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
            <img v-else :src="getImgView(text)" height="25px" alt="图片不存在"
                 style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
            <a-button
              v-else
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
              @click="uploadFile(text)">
              下载
            </a-button>
          </template>
                  <span slot="action" slot-scope="text, record">
                    <a @click="handleEdit(record)">查看详情</a>
                   <!-- <a-divider type="vertical" />
                    <a-dropdown>
                      <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                      <a-menu slot="overlay">
                        <a-menu-item>
                          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                            <a>删除</a>
                          </a-popconfirm>
                        </a-menu-item>
                      </a-menu>
                    </a-dropdown>-->
                  </span>
        </a-table>
      </div>
      <process-finish-modal1 @parentComponentClose="parentComponentClose"  ref="modalForm" @ok="modalFormOk"></process-finish-modal1>
    </a-card>
  </a-modal>
</template>

<script>

    import {JeecgListMixin} from '@/mixins/JeecgListMixin'
    import ProcessFinishModal1 from '@/views/jingzhun/loanmanagement/modules/modules/ProcessFinishModal1'
    import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
    import {initDictOptions, filterMultiDictText} from '@/components/dict/JDictSelectUtil'

    export default {
        name: "ProcessFinishListModal",
        mixins: [JeecgListMixin],
        components: {
            ProcessFinishModal1,
            JDictSelectTag,
        },
        data() {
            return {
                queryParam: {
                    processId: '3',
                    approvalProcessType:'0'
                },
                title: "审批历史-已结束",
                width: 800,
                visible: false,
                description: '审批流程-结束 （通过或者拒绝）管理页面',
                // 表头
                columns: [
                    {
                        title: '#',
                        dataIndex: '',
                        key: 'rowIndex',
                        width: 60,
                        align: "center",
                        customRender: function (t, r, index) {
                            return parseInt(index) + 1;
                        }
                    }
                    /*,
          {
            title:'processId',
            align:"center",
            dataIndex: 'processId'
          }*/,
          /*{
            title:'流程类别',
            align:"center",
            dataIndex: 'approvalProcessType',
            customRender:(text)=>{
              if(!text){
                return ''
              }else{
                return filterMultiDictText(this.dictOptions['approvalProcessType'], text+"")
              }
            }
          },*/{
                        title:'流程步骤',
                        align:"center",
                        dataIndex: 'approvalProcessCode',
                        customRender:(text)=>{
                            if(!text){
                                return ''
                            }else{
                                return filterMultiDictText(this.dictOptions['currentStatusPkh'], text+"")
                            }
                        }
                    },
                    {
                        title: '受理人',
                        align: "center",
                        dataIndex: 'operator'
                    },
                    {
                        title: '受理时间',
                        align: "center",
                        dataIndex: 'approvalProcessDate',
                        customRender: function (text) {
                            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
                        }
                    },
                    {
                        title: '回复内容',
                        align: "center",
                        dataIndex: 'replyContent'
                    },
                    /*{
                        title: '相关资料',
                        align: "center",
                        dataIndex: 'information',
                        scopedSlots: {customRender: 'fileSlot'}
                    },*/
                    {
                        title: '状态',
                        align: "center",
                        dataIndex: 'state',
                        customRender: (text) => {
                            if (!text) {
                                return ''
                            } else {
                                return filterMultiDictText(this.dictOptions['processState'], text + "")
                            }
                        }
                    },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
                ],
                url: {
                    list: "/loanmanagement/processFinish/list",
                    delete: "/loanmanagement/processFinish/delete",
                    deleteBatch: "/loanmanagement/processFinish/deleteBatch",
                    exportXlsUrl: "/loanmanagement/processFinish/exportXls",
                    importExcelUrl: "loanmanagement/processFinish/importExcel",
                },
                dictOptions: {
                    approvalProcessType: [],
                    state: [],
                }
            }
        },
        computed: {
            importExcelUrl: function () {
                return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
            }
        },
        methods: {
            parentComponentClose(data) {
                this.visible = false;
                this.$emit('parentComponentReLoad','reloadData');
            },
            initDictConfig() {
                initDictOptions('approval_process_type').then((res) => {
                    if (res.success) {
                        this.$set(this.dictOptions, 'approvalProcessType', res.result)
                    }
                })
                initDictOptions('current_status_pkh').then((res) => {
                    if (res.success) {
                        this.$set(this.dictOptions, 'currentStatusPkh', res.result)
                    }
                })
                initDictOptions('process_state').then((res) => {
                    if (res.success) {
                        this.$set(this.dictOptions, 'processState', res.result)
                    }
                })
            },
            showGoodsGallery1(record) {
                this.queryParam.processId = record.id
                this.queryParam.approvalProcessType = '0'
                this.loadData(1);
                this.visible = true
            },
            handleCancel() {
                this.visible = false;
            },
            handleEdit: function (record) {
                this.$refs.modalForm.edit(record);
                this.$refs.modalForm.title = "查看详情";
                this.$refs.modalForm.disableSubmit = false;
            }

        }
    }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>